<template>
	<view>
		<common-title :title="pageTitle" :showBack="true"></common-title>

		<view class="view-line">
			<view class="view-line-left">留言标题</view>
			<view class="view-line-right">{{newsDetail.name}}</view>
		</view>
		<view class="view-line">
			<view class="view-line-left">发起人</view>
			<view class="view-line-right">{{newsDetail.recipientName}}</view>
		</view>

		<view class="view-line">
			<view class="view-line-left">留言内容</view>
			<view class="view-line-right news-content-type">
				<image src="/static/icon_circle.png"></image><text>{{newsDetail.messageMethodName}}</text>
			</view>
		</view>
		<view class="view-line">
			<view class="news-content" v-if="newsDetail.messageMethod=='text_message'">{{newsDetail.textContent}}</view>

			<view class="news-record" v-else>
				<image :src="!isStartRef ? '/static/icon_player_stop.png' : '/static/icon_player_start.png'"
					class="player" @click="startOrStop"></image>
				<text class="play-time">{{currentProgressTime}}</text>
				<progress :percent="progress" activeColor="#0F6AF8" background-color="#C6D1E2" stroke-width="10"
					class="progress" border-radius="10" />
				<text class="all-time">{{allProgressTime}}</text>
			</view>
		</view>

		<view class="view-opreration">
			<view class="btn-close" @click="close">关闭</view>
			<!-- 	v-if="newsDetail.readingStatus=='unread'" -->
			<view class="btn-save" @click="read" >已读</view>
		</view>

	</view>
</template>


<script setup>
	import * as httpConfig from "../../common/http-config.js";
	import * as DataUtils from "../../utils/DataUtils";
	import CommonTitle from '@/components/common-title.vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		onMounted,
		onUnmounted,
		computed,
		watch,
		defineComponent,
		reactive
	} from 'vue'
	// 使用 onMounted 钩子
	onMounted(() => {
		console.log("组件已经挂载了.......")
		// 暴露方法
		window["onTtsState"] = (state) => {
			console.log("onTtsState state = " + state)

		}

	});
	onLoad((option) => {
		console.log("onLoad..." + option.id)
		messageRecordDetail(option.id)
	})
	const pageTitle = ref("留言详情")
	const progress = ref(0)
	const allProgress = ref(0)
	var timer = null

	let isStartRef = ref(false)

	let currentProgress = ref(0)
	// 开始播放
	const startPlay = (() => {
		console.log("startPlay")
		isStartRef.value = true
		currentProgress.value = 0
		if (timer) return; // 防止重复启动定时器
		if (newsDetail.value.messageMethod == 'text_to_voice') {
			window.hb.ttsSpeak(newsDetail.value.textContent)

		}
		if (newsDetail.value.messageMethod == 'voice_message') {
			window.hb.startNetFilePlay(newsDetail.value.voiceFile)
		}

		timer = setInterval(() => {
			if (currentProgress.value >= allProgress.value) {
				stopPlay();

			} else {
				currentProgress.value = currentProgress.value + 1
				let percentage = (currentProgress.value / allProgress.value) * 100;
				console.log("percentage:" + percentage)
				progress.value = (percentage);
			}


		}, 1000);
	});

	// 停止播放
	const stopPlay = (() => {
		console.log("stopPlay")

		if (newsDetail.value.messageMethod == 'text_to_voice') {
			window.hb.ttsStop()
		}
		if (newsDetail.value.messageMethod == 'voice_message') {
			window.hb.stopFilePlay()
		}


		isStartRef.value = false
		currentProgress.value = 0
		progress.value = 0
		if (timer) {
			clearInterval(timer);
			timer = null;
		}
	});
	// 
	const startOrStop = (() => {
		console.log("startOrStop")
		if (isStartRef.value) {
			stopPlay()
		} else {
			startPlay()
		}
	});

	const close = (() => {
		console.log("close")
		// 在这里实现返回逻辑
		uni.navigateBack(); // 例如：调用 UniApp 的返回上一页方法

	});
	const read = (() => {
		console.log("read")
		uni.showLoading({
			title: "请稍后..."
		})
		let data = {
			"id": newsDetail.value.id,
		}
		uni.request({
			url: httpConfig.baseURL + httpConfig.messageRecordRead, // 
			method: 'POST', // 请求方法为 POST
			data: data,
			success: (res) => {
				uni.hideLoading()
				if (res.data.code == httpConfig.successCode) {
					console.log('messageRecordRead success ' + res.data.data);
					uni.showToast({
						title: "阅读成功",
						icon: "success",
						duration: 2000
					});
					uni.navigateBack(); // 例如：调用 UniApp 的返回上一页方法

				} else {
					uni.showToast({
						title: it.data.message,
						icon: "fail",
						duration: 2000
					});
				}
				// 在这里处理请求成功的情况
			},
			fail: (err) => {
				uni.hideLoading()
				console.error('messageRecordRead fail ');
				uni.showToast({
					title: "阅读失败" + err,
					icon: "fail",
					duration: 2000
				});
				// 在这里处理请求失败的情况
			}
		});




	});




	const currentProgressTime = computed(() => {
		return DataUtils.formatTime(currentProgress.value);

	});
	const allProgressTime = computed(() => {
		return DataUtils.formatTime(allProgress.value);

	});


	const newsDetail = ref(null)
	// 消息详情
	const messageRecordDetail = (id) => {
		uni.showLoading({
			title: "请稍后..."
		})
		let data = {
			"id": id,
		}
		uni.request({
			url: httpConfig.baseURL + httpConfig.messageRecordDetail, // 
			method: 'POST', // 请求方法为 POST
			data: data,
			success: (res) => {
				uni.hideLoading()
				if (res.data.code == httpConfig.successCode) {
					console.log('messageRecordDetail success ' + res.data.data);
					newsDetail.value = res.data.data
					allProgress.value = newsDetail.value.voiceDuration

				} else {
					uni.showToast({
						title: it.data.message,
						icon: "fail",
						duration: 2000
					});
				}
				// 在这里处理请求成功的情况
			},
			fail: (err) => {
				uni.hideLoading()
				console.error('messageRecordDetail fail ');
				uni.showToast({
					title: "获取留言详情失败" + err,
					icon: "fail",
					duration: 2000
				});
				// 在这里处理请求失败的情况
			}
		});
	}
</script>

<style lang="less" scoped>
	@vw: 8.015vw;
	@vh: 5.4vh;

	// 底部操作按钮
	.view-opreration {
		width: 100%;
		justify-content: center;
		display: flex;
		flex-direction: row;
		font-size: 13/@vh;
		align-items: center;
		margin-top: 40/@vh;

		.btn-close {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50/@vw;
			height: 28/@vh;
			border-radius: 3/@vh;
			border: 0.5/@vh solid #0F6AF8;
			color: #2C2E30;
		}

		.btn-save {
			margin-left: 32/@vw;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50/@vw;
			height: 28/@vh;
			border-radius: 3/@vh;
			background-color: #0F6AF8;
			color: white;
		}

		.btn-save-publish {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50/@vw;
			height: 28/@vh;
			border-radius: 3/@vh;
			background-color: #0F6AF8;
			color: white;
		}
	}

	@vw: 8.015vw;
	@vh: 5.4vh;

	.view-line {
		display: flex;
		flex-direction: row;
		margin-left: 80/@vw;
		font-size: 13/@vh;
		margin-top: 12/@vw;
		align-items: start;


		.view-line-left {
			color: #66696C;
			width: 72/@vw;

		}

		.view-line-right {
			color: #2C2E30;


		}

		.news-content-type {
			display: flex;
			flex-direction: row;

			image {
				width: 17/@vw;
				height: 17/@vw;
				margin-right: 12/@vw;
			}

		}


		.news-content {

			border-radius: 4/@vh;
			padding: 12/@vw;
			background-color: #F4F6FD;
			margin-left: 72/@vw;

		}

		.news-record {
			margin-left: 72/@vw;
			width: 350/@vw;
			height: 50/@vh;
			background-color: #E6EBFB;
			border-radius: 30/@vh;
			display: flex;
			align-items: center;

			.player {
				width: 26/@vw;
				height: 26/@vw;
				margin-left: 11/@vw;
			}

			.play-time {
				margin-left: 16/@vw;
			}

			.progress {
				width: 167/@vw;
				height: 5/@vh;
				margin-left: 20/@vw;
				margin-right: 20/@vw;

			}
		}

		.view-bed-list {
			flex: 1;
		}

	}


	.view-line-bed-list {
		display: flex;
		flex-direction: row;
		margin-left: 80/@vw;
		font-size: 13/@vh;
		margin-top: 12/@vw;
		align-items: start;

		.view-line-left {
			color: #66696C;
			width: 100/@vw;
		}

		.view-line-right {

			color: #2C2E30;
			margin-left: 20/@vw;
			margin-right: 10/@vw;

		}
	}

	::v-deep.uni-progress-bar {
		border-radius: 5px !important;
	}

	::v-deep.uni-progress-inner-bar {
		border-radius: 5px !important;
	}
</style>